<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>购物车</title>
    <link rel="stylesheet" href="../css/首页.css">
    <link rel="stylesheet" href="../css/购物车.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script>
       $(function(){  
            let num = location.search.split('=')[1];
            console.log(num);
            var pho=document.getElementById("phone");
            pho.innerHTML="[ "+num+" ]";

            var shop=cookie.get('shop');
            console.log(shop);
            if (shop) {
                shop = JSON.parse(shop);
                var idList = shop.map(elm => elm.id).join();
                console.log(idList);
                var arrry=[];
                $.ajax({
                    type: "get",
                    url: "../lib/shopcar.php",
                    data: {
                        'idList': idList
                    },
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        // console.log(data[1].id);
                        var temp="";
                        data.forEach((element,i) => {
                            let pic=JSON.parse(element.pic);
                            // console.log(pic);
                            var arr = shop.filter((val, i) => {
                                return val.id == element.id;
                            });
                            console.log(arr);
                            // console.log(element.price);
                            temp+=`
                                <li value="${element.id}">
                                    <dd class="title">
                                        <div class="row">
                                            <span class="col-xs-3">
                                                <i class="glyphicon glyphicon-ok-circle"></i>
                                                <span>${element.logistics}</span>
                                            </span>
                                        </div>
                                    </dd>
                                    <dd class="list">
                                        <div class="row">
                                            <div class="col-xs-1">
                                                <i class="glyphicon glyphicon-ok-circle"></i>
                                            </div>
                                            <div class="col-xs-6">
                                                <div class="pic"><a href="./商品详情.html?id=${element.id}" target="_blank">
                                                    <img src="${pic[0].src}" alt="" width="100">
                                                </a></div>
                                                <div class="info"><a href="./商品详情.html?id=${element.id}" target="_blank">
                                                        <p>${element.details}</p>
                                                </a></div>
                                            </div>
                                            <div class="col-xs-1">
                                                <div class="price">
                                                    <em style="font-size: 65%;">￥</em>
                                                    <span class="univ">${element.price}</span>
                                                </div>
                                            </div>
                                            <div class="col-xs-2">
                                                <div id="num">
                                                    <span class="reduce btn" id="${element.id}">-</span>
                                                    <input type="text" value="${arr[0].num}" name="${i}" id="${element.id}" class="goods-num">
                                                    <span class="add btn" id="${element.id}">+</span>
                                                </div>
                                            </div>
                                            <div class="col-xs-1">
                                                <div class="price">
                                                    <em style="font-size: 65%;">￥</em>
                                                    <span class="subtotal">
                                                        ${(arr[0].num*element.price).toFixed(2)}
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-xs-1">
                                                <a class="del box glyphicon glyphicon-remove">
                                                </a>
                                            </div>
                                        </div>
                                    </dd>
                                </li>
                            `;
                            // console.log(temp); 
                        });
                        // console.log(arr1);
                        $(".temp").append(temp); 
                        var num=0;
                        var price=0;
                        shop.forEach((element,i)=>{
                            // console.log(element.num);
                            num+=parseInt(element.num);
                            price+=parseInt(element.num)*parseInt(element.price);
                            // console.log(num);
                        })
                        let temp1=`
                            <div class="row">
                                <div class="col-xs-4 left">
                                    <a class="empty">清空购物车</a>
                                </div>
                                <div class="col-xs-8 right">
                                    <div class="text">
                                        <span class="total">
                                            <em style="font-style: normal;font-size: 65%;">￥</em>
                                            <i style="font-style: normal;" id="sub">${price.toFixed(2)}</i>
                                        </span>
                                        <span class="info">已选择&nbsp;<i id="sum" style="font-style: normal;">${num}</i>&nbsp;件商品， 总价（不含运费）：</span>
                                    </div>
                                    <div class="checkout"><a href="">去结账</a></div>
                                </div>
                            </div>
                        `;
                        // console.log(temp1);
                        $(".temp1").append(temp1); 


                        var count=1;
                        $(".shop-box").find(".goods-num").on('keyup',function(ev){
                            // var i = $(".shop-box").index($(this));
                            var input=document.querySelectorAll(".goods-num");
                            var num=ev.target.value;
                            if(isNaN(num)||num<=0){
                                ev.target.value=1;
                                num=1;
                            }
                            
                            var price=document.querySelectorAll(".univ");
                            var total=document.querySelectorAll(".subtotal");
                            var i=ev.target.name;
                            var p=price[i].innerHTML;
                            total[i].innerHTML=(num*p).toFixed(2);
                            
                            console.log(num);
                            var id=this.id;
                            console.log(id);
                            var shop = cookie.get('shop');
                            if (shop) {
                                shop = JSON.parse(shop);
                                if (shop.some(elm => elm.id == id)) {
                                    shop.forEach(elm => {
                                        elm.id == id ? elm.num = num : null;
                                    });
                                } 
                            } 
                            cookie.set('shop', JSON.stringify(shop), 1);

                            var s=0,p=0;
                            var number=document.getElementById("sum");
                            var sub=document.getElementById("sub");
                            shop.forEach((element,i)=>{
                                s+=parseInt(element.num);
                                p+=parseInt(element.num)*parseInt(element.price);
                            })
                            number.innerHTML=parseInt(s);
                            sub.innerHTML=parseInt(p).toFixed(2);
                        }),                   
                        $(".shop-box").find(".add").on('click',function(ev){
                            var i = $(".add").index($(this));
                            var input=document.querySelectorAll(".goods-num");
                            var num=input[i].value;
                            input[i].value=parseInt(num)+count;

                            var price=document.querySelectorAll(".univ");
                            var total=document.querySelectorAll(".subtotal");
                            var p=price[i].innerHTML;
                            num=input[i].value;
                            total[i].innerHTML=(num*p).toFixed(2);

                            var number=document.getElementById("sum");
                            var sum=number.innerHTML;
                            number.innerHTML=parseInt(sum)+count;

                            var id=this.id;
                            var shop = cookie.get('shop');
                            if (shop) {
                                shop = JSON.parse(shop);
                                if (shop.some(elm => elm.id == id)) {
                                    shop.forEach(elm => {
                                        elm.id == id ? elm.num = num : null;
                                    });
                                } 
                            } 
                            cookie.set('shop', JSON.stringify(shop), 1);

                            var s=0,p=0;
                            var sub=document.getElementById("sub");
                            shop.forEach((element,i)=>{
                                s+=parseInt(element.num);
                                p+=parseInt(element.num)*parseInt(element.price);
                            })
                            number.innerHTML=parseInt(s);
                            sub.innerHTML=parseInt(p).toFixed(2);

                        }),
                        $(".shop-box").find(".reduce").on('click',function(ev){
                            var i = $(".reduce").index($(this));
                            var input=document.querySelectorAll(".goods-num");
                            var num=input[i].value;
                            input[i].value=parseInt(num)-count;
                            if(num<=1){
                                input[i].value=1;
                            }
                            
                            var price=document.querySelectorAll(".univ");
                            var total=document.querySelectorAll(".subtotal");
                            var p=price[i].innerHTML;
                            num=input[i].value;
                            total[i].innerHTML=(num*p).toFixed(2);

                            var number=document.getElementById("sum");
                            var sum=number.innerHTML;
                            number.innerHTML=parseInt(sum)-count;
                            if(sum<=3){
                                number.innerHTML=3;
                            }

                            var id=this.id;
                            var shop = cookie.get('shop');
                            if (shop) {
                                shop = JSON.parse(shop);
                                if (shop.some(elm => elm.id == id)) {
                                    shop.forEach(elm => {
                                        elm.id == id ? elm.num = num : null;
                                    });
                                } 
                            } 
                            cookie.set('shop', JSON.stringify(shop), 1);

                            var s=0,p=0;
                            var sub=document.getElementById("sub");
                            shop.forEach((element,i)=>{
                                console.log(element.num);
                                s+=parseInt(element.num);
                                p+=parseInt(element.num)*parseInt(element.price);
                            })
                            number.innerHTML=parseInt(s);
                            sub.innerHTML=parseInt(p).toFixed(2);
                        }),
                        $(".shop-box").find(".del").on('click',function(ev){
                            // var child=ev.target.parentNode.parentNode.parentNode.parentNode;
                            // child.remove();
                            if(!confirm("确定删除该购物单？")){
                                return;
                            };
                            $(this).parent().parent().parent().parent().remove();
                            // console.log($(this).parent().parent().parent().parent());

                        }),
                        $(".bar").find(".empty").on('click',function(ev){
                            // var parent=ev.target.parentNode.parentNode.parentNode.previousElementSibling;
                            var parent=document.getElementById("shoplist");
                            // console.log(parent);
                            if(!confirm("确定清空购物车？")){
                                return;
                            };
                            parent.remove();
                        });
                        var length=0;
                        var len=document.getElementById("length");
                        shop.forEach((element,i)=>{
                            length++;
                        })
                        console.log(length);
                        len.innerHTML=length;
                        
                    }
                });
            }
            $("#logo-img").on("mouseenter",function(){
                var logo=document.getElementById("logo-img");
                console.log(logo.href);
                logo.href="./首页1.html?phone="+num;
            })
       })

    </script>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
        <!-- 头部 -->
        <div id="site-nav">
            <div class="container">
                <p class="col-xs-3">嗨~，欢迎来到M宝商城！</p>
                <div class="col-xs-9">
                    <ul id="right">
                        <li><a href="javascript:void;" style="color: #2d8701;" id="phone">登录</a></li>
                        <li><a href="./首页.html">[ 退出 ]</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li class="user">
                            <a href="#">个人中心
                                <i class="sj"></i>
                            </a>
                            <ul class="subnav">
                                <li><a href="">我的优惠券</a></li>
                                <li><a href="">我的收藏</a></li>
                                <li><a href="">我的店铺</a></li>
                                <li><a href="">我的邀请</a></li>
                            </ul>
                        </li>
                        <li><a href="#">手机版</a></li>
                    </ul>
                </div>
            </div>
        </div>  
        <!-- 顶部logo -->
        <nav class="navbar" style="height: 112px;border-bottom: 1px #eeeeee solid;">
            <div class="container" style="height: 100%;">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header col-xs-4 nav" style="height: 100%;">
                    <a class="navbar-brand" href="../html/首页.html" id="logo-img"><img src="http://mbaoshop.oss-cn-shenzhen.aliyuncs.com//Uploads/Picture/2017-07-10/59632c0977fde.png" alt=""></a>
                </div>
                <div class="col-xs-8 nav" style="height: 100%; float: left;">
                    <ul style="padding: 0px;">
                        <li class="col-xs-9" style="padding: 0px;">
                            <form class="navbar-left col-xs-12" style="padding-right:20px;">
                                <div class="form-group col-xs-10" style="padding: 0px;">
                                    <input type="text" class="form-control" placeholder="购买您想要的商品">
                                </div>
                                <button type="submit" class="col-xs-2" >搜索</button>
                            </form>
                        </li>
                        <li class="box col-xs-3" style="padding: 0px;">
                            <a href="#" class="btn btn-positive">
                                <i class="glyphicon glyphicon-shopping-cart"></i>我的购物车
                                <span class="badge" id="length">0</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div><!-- /.container-fluid -->
        </nav>
        <!-- 导航条 -->
        <div class="navbar" id="navbar">
            <div class="container">
                <div class="navbar-header col-xs-2" id="box">
                    <a href="">
                        浏览全部商品
                        <i class="glyphicon glyphicon-menu-down" style="color: #bbbbbb;"></i>
                    </a>
                </div>
                <div class="after-sale" id="box" style="width: 10%;"><a href="">售后服务</a></div>
                <span style="float: right;line-height: 50px;">客服热线：</span>
            </div>
        </div>
        <!-- 购物车 -->
        <div class="shopcar">
            <div class="container">
                <h3>我的购物车</h3>
                <div class="shoppingList">
                    <dl>
                        <dt>
                            <div class="row">
                                <span class="col-xs-1">选择</span>
                                <span class="col-xs-6">商品信息</span>
                                <span class="col-xs-1">单价</span>
                                <span class="col-xs-2">数量</span>
                                <span class="col-xs-1">小计</span>
                                <span class="col-xs-1">操作</span>
                            </div>
                        </dt>
                        <div class="shop-box temp" id="shoplist">
                        </div>
                        <div class="bar temp1">
                        </div>
                    </dl>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <footer id="footer" style="background: #444;">
            <div class="container">
                <div id="map">
                    <ul class="col-xs-12">
                        <li class="col-xs-2">
                            <a href="">
                                <i><img src="../img/map1.png" alt=""></i>
                                <h4>帮助中心</h4>
                            </a>
                            <p>积分规则 邀请规则</p>
                        </li>
                        <li class="col-xs-2">
                            <a href="">
                                <i><img src="../img/map2.png" alt=""></i>
                                <h4>购物指南</h4>
                            </a>
                            <p>免费注册 快速下单</p>
                        </li>
                        <li class="col-xs-2">
                            <a href="">
                                <i><img src="../img/map3.png" alt=""></i>
                                <h4>售后服务</h4>
                            </a>
                            <p>售后政策 取消订单</p>
                        </li>
                        <li class="col-xs-2">
                            <a href="">
                                <i><img src="../img/map4.png" alt=""></i>
                                <h4>正品保障</h4>
                            </a>
                            <p>正品行货 放心选购</p>
                        </li>
                    </ul>
                </div>
                <div id="info">
                    <a href="">关于我们</a><em>|</em>
                    <a href="">购物指南</a><em>|</em>
                    <a href="">售后服务</a>
                </div>
                <div id="copyright">
                    <p>©  M宝商城  凯盛嘉业网络科技有限公司   粤ICP备17071557号-1   增值电信业务经营许可证：粤B2-20170758  食品经营许可证：JY14401060269164(1-1)</p>
                </div>    
            </div>
        </footer>    
     


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>
     